<!DOCTYPE html>
<html>
<head>
    <style>
        .array-container {
            display: flex;
            align-items: flex-end;
            height: 300px;
            padding: 20px;
            gap: 2px;
        }
        .array-bar {
            width: 30px;
            background-color: #90CAF9;
            transition: all 0.3s;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 5px;
            font-size: 12px;
            color: #333;
        }
    </style>
</head>
<body style="background: #f0f0f0; margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh;">
    <div class="array-container">
        <div class="array-bar" style="height: 30px;">3</div>
        <div class="array-bar" style="height: 220px;">44</div>
        <div class="array-bar" style="height: 190px;">38</div>
        <div class="array-bar" style="height: 25px;">5</div>
        <div class="array-bar" style="height: 235px;">47</div>
        <div class="array-bar" style="height: 75px;">15</div>
        <div class="array-bar" style="height: 180px;">36</div>
        <div class="array-bar" style="height: 130px;">26</div>
        <div class="array-bar" style="height: 135px;">27</div>
        <div class="array-bar" style="height: 10px;">2</div>
        <div class="array-bar" style="height: 230px;">46</div>
        <div class="array-bar" style="height: 20px;">4</div>
        <div class="array-bar" style="height: 95px;">19</div>
        <div class="array-bar" style="height: 250px;">50</div>
        <div class="array-bar" style="height: 240px;">48</div>
    </div>
    <script>
        const bars = document.querySelectorAll('.array-bar');
        let values = Array.from(bars).map(bar => parseInt(bar.textContent));
        
        async function insertionSort() {
            for(let i = 1; i < values.length; i++) {
                const key = values[i];
                const keyHeight = bars[i].style.height;
                const keyText = bars[i].textContent;
                let j = i - 1;
                
                // 高亮当前要插入的元素
                bars[i].style.backgroundColor = '#FF4081';
                await new Promise(resolve => setTimeout(resolve, 500));
                
                while(j >= 0 && values[j] > key) {
                    // 高亮比较的元素
                    bars[j].style.backgroundColor = '#FF9800';
                    await new Promise(resolve => setTimeout(resolve, 200));
                    
                    // 移动元素
                    values[j + 1] = values[j];
                    bars[j + 1].style.height = bars[j].style.height;
                    bars[j + 1].textContent = bars[j].textContent;
                    
                    // 恢复颜色
                    bars[j].style.backgroundColor = '#90CAF9';
                    j--;
                }
                
                // 插入元素
                values[j + 1] = key;
                bars[j + 1].style.height = keyHeight;
                bars[j + 1].textContent = keyText;
                bars[j + 1].style.backgroundColor = '#4CAF50';
                
                await new Promise(resolve => setTimeout(resolve, 300));
                
                // 恢复已排序部分的颜色
                for(let k = 0; k <= i; k++) {
                    bars[k].style.backgroundColor = '#90CAF9';
                }
            }
            
            // 完成排序，全部显示为绿色
            for(let i = 0; i < bars.length; i++) {
                bars[i].style.backgroundColor = '#4CAF50';
                await new Promise(resolve => setTimeout(resolve, 50));
            }
        }

        setTimeout(insertionSort, 1000);
        setInterval(() => {
            // 重置颜色和位置
            values = [3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];
            bars.forEach((bar, index) => {
                bar.style.backgroundColor = '#90CAF9';
                bar.style.height = `${values[index] * 5}px`;
                bar.textContent = values[index];
            });
            insertionSort();
        }, 15000); // 每15秒重新开始
    </script>
</body>
</html> 